<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>BIM</title>
    <link rel="stylesheet" href="../libs/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="../libs/supermap/pretty.css">
    <script type="text/javascript" src="../libs/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../libs/supermap/SuperMap.Include.js"></script>
    <script type="text/javascript" src="../libs/jquery/require.min.js" data-main="../libs/supermap/main"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000000;
        }

        .cesium-viewer-bottom {
            display: none;
        }
    </style>

</head>

<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<script>
    var viewer = null;
    var scene = null;

    function onload(Cesium) {
        viewer = new Cesium.Viewer('cesiumContainer');
        scene = viewer.scene;
        scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 1.0); // 没有影像时地球的基础颜色，默认为蓝色
        scene.globe.show = false; // 是否显示地球
        scene.globe.depthTestAgainstTerrain = true;
        scene.imageryLayers.removeAll(true); // 移除所有imagery
        $('#loadingbar').remove();

        var promise = scene.addS3MTilesLayerByScp("http://172.29.1.151:8090/iserver/services/3D-JieGouZhu/rest/realspace/datas/结构柱@结构/config", {name: "结构柱@结构"});

        Cesium.when(promise, function (layer) {
            if(!scene.pickPositionSupported){
                alert('不支持深度拾取,属性查询功能无法使用！');
            }
            //设置属性查询参数
            layer.setQueryParameter({
                url: 'http://172.29.1.151:8090/iserver/services/data-JieGouZhu/rest/data',
                dataSourceName: '单一图层测试',
                dataSetName: '结构柱',
                keyWord: 'SmID'
            });
            scene.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(115.50142405008323, 30.50063049630867, 35.48096279815383),
                orientation: {
                    heading: 4.695710252393422,
                    pitch: -0.4789857731977838,
                    roll: 6.283185307104354
                }
            });
        });

        var selectEntity = new Cesium.Entity();
        //注册鼠标点击事件
        viewer.pickEvent.addEventListener(function(feature){
            var propertyHtml = "";
            for(var key in feature){
                propertyHtml += "<tr><td>" + key + "</td><td>" +
                    feature[key] + "</td></tr>";
            }
            selectEntity.name = feature["CATEGORYNAME"];
            selectEntity.description = "<table class='cesium-infoBox-defaultTable'><tbody> " +
                propertyHtml + " </tbody></table>";
            viewer.selectedEntity = selectEntity;
        });
    }
</script>
</body>

</html>